<template>
	<view class="page-content">
		<view class="info-box">


			<view class="flex-start" style="align-items: center;font-size: 18px;font-weight: 600;margin-bottom: 20px;">
				<image src="../../../static/wallet/redract.png" mode=""
					style="width: 4px;height: 21px;margin-right: 10px;transform: translateY(1px);"></image>
				<text>钓场：万顺源垂钓俱乐部</text>
			</view>

			<view class="flex-start" style="align-items: center;font-size: 18px;font-weight: 600;margin-bottom: 20px;">
				<image src="../../../static/wallet/redract.png" mode=""
					style="width: 4px;height: 21px;margin-right: 10px;transform: translateY(1px);"></image>
				<text>场次：0729正钓鲤鱼7000斤</text>
			</view>

			<view class="flex-start mb-10" style="font-weight: 600;">
				<view class="flex-start" style="margin-right: 15px;">
					<text>报名票数：</text><text>10</text>
				</view>
				<view class="flex-start">
					<text>交鱼票数：</text><text>10</text>
				</view>
			</view>

			<view class="flex-start mb-10" style="font-weight: 600;">
				<text>称重鱼护个数：</text><text>7</text>
			</view>

			<view class="flex-start" style="align-items: center;font-size: 18px;font-weight: 600;margin-bottom: 20px;">
				<image src="../../../static/wallet/redract.png" mode=""
					style="width: 4px;height: 21px;margin-right: 10px;transform: translateY(1px);"></image>
				<text>本场总鱼获</text>
			</view>

			<view class="table-box" style="border: 1px solid #E5E5E5;margin-bottom: 15px;">
				<view class="flex-center" style="background: #F3F4F6;padding: 10px;border-bottom: 1px solid #E5E5E5;">
					<text>鲤鱼(6.00元/公斤)</text>
				</view>
				<view class="flex-between">
					<text class="flex-1"
						style="padding: 10px;border-bottom: 1px solid #E5E5E5;border-right: 1px solid #E5E5E5;">称重总重量</text>
					<text class="flex-1" style="padding: 10px;border-bottom: 1px solid #E5E5E5;">205.5公斤(411斤)</text>
				</view>
				<view class="flex-between">
					<text class="flex-1"
						style="padding: 10px;border-bottom: 1px solid #E5E5E5;border-right: 1px solid #E5E5E5;">限重扣除</text>
					<text class="flex-1" style="padding: 10px;border-bottom: 1px solid #E5E5E5;">0公斤(0斤)</text>
				</view>
				<view class="flex-between">
					<text class="flex-1" style="padding: 10px;border-right: 1px solid #E5E5E5;">总金额</text>
					<text class="flex-1" style="padding: 10px;">￥1233.0</text>
				</view>
			</view>

			<view class="flex-start" style="align-items: center;font-size: 18px;font-weight: 600;margin-bottom: 20px;">
				<image src="../../../static/wallet/redract.png" mode=""
					style="width: 4px;height: 21px;margin-right: 10px;transform: translateY(1px);"></image>
				<view class="uni-input-wrapper flex-start"
					style="width:fit-content;align-items: center;padding: 5px 10px;border-radius: 7px;">
					<input class="uni-input" placeholder="请输入手机号后四位搜索" v-model="phoneNum" style="flex:1;" />
					<uni-icons type="search" size="25" style="font-weight: 400;" @click="toSearch"></uni-icons>
				</view>
			</view>
		</view>

		<view class="list-box">
			<view class="list-item" v-for="item in listData" :key="item.id">
				<view class="right-top">
					<image src="../../../static/wallet/lineDown.png" mode="" v-if="item.type==1"
						style="width: 93px;height: 93px;"></image>
					<image src="../../../static/wallet/lineUp.png" mode="" v-if="item.type==0"
						style="width: 93px;height: 93px;"></image>
				</view>
				<view class="flex-start mb-10">
					<text>收鱼时间：</text>
					<text>{{item.time}}</text>
				</view>
				<view class="flex-start mb-10">
					<text>票号：</text>
					<text>{{item.num}}</text>
				</view>
				<view class="flex-between" style="align-items: center;">
					<view class="flex-start" style="align-items: center;">
						<image :src="item.avatar" mode="" style="width: 45px;height: 45px;"></image>
						<view style="margin: 0 20px;">
							<view class="flex-start">
								<view>姓名：</view>
								<view>{{item.name}}</view>
							</view>
							<view class="flex-start">
								<view>手机号：</view>
								<view>{{item.phone}}</view>
							</view>
						</view>
					</view>

					<view class="flex-column-between"
						style="padding: 10px; font-size: 18px; border: 1px solid #000; border-radius: 5px;margin-right: 20px;">
						<text>{{item.site}}</text>
						<text>{{item.siteNum}}</text>
					</view>
				</view>
				<view class="flex-start mb-10">
					<text>收鱼：</text>
					<text>{{item.fishCount}}次</text>
				</view>
				<view class="flex-start mb-10" style="align-items: center;">
					<text>鱼获：</text>
					<text>{{item.weight}}</text>
					<uni-icons type="right" size="24" style="color:#D43030"></uni-icons>
				</view>

				<view class="flex-start red-word">
					<text>金额</text>
					<text>{{item.balance}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneNum:'',
				listData: [{
						time: '2024-07-28 10:29:21',
						num: 1562,
						avatar: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF',
						name: '冯辉',
						phone: '18612345667',
						fishCount: 1,
						weight: '鲤鱼24.5公斤(49斤)',
						balance: '147.00',
						site: '一区',
						siteNum: 21,
						type: 1
					},
					{
						time: '2024-07-28 10:29:21',
						num: 1562,
						avatar: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF',
						name: '冯辉',
						phone: '18612345667',
						fishCount: 1,
						weight: '鲤鱼24.5公斤(49斤)',
						balance: '147.00',
						site: '一区',
						siteNum: 21,
						type: 0
					}
				]
			}
		},
		methods:{
			toSearch(){
				console.log(this.phoneNum);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		background: #F3F4F6;
		height: calc(100vh - 44px);
	}

	.info-box {
		background: #fff;
		padding: 15px;
		margin-bottom: 15px;
	}

	.list-box {
		height: calc(100vh - 419px);
		overflow: auto;
	}

	.list-item {
		position: relative;
		background: #fff;
		margin-bottom: 15px;
		padding: 15px;
	}

	.red-word {
		color: #D43030;
		font-size: 18px;
		font-weight: 600;
	}

	.right-top {
		position: absolute;
		top: 0;
		right: 0;
	}

	.mb-10 {
		margin-bottom: 10px;
	}

	.flex-1 {
		text-align: center;
		flex: 1;
	}
</style>